<template>
	<view style="width: 100%;height: 100%;">
		<view>
			<select @change="changeValue" v-model="opValue"  class="select1">
				<option v-for="(item,index) in options" :key="index" :value="item.value" style="font-size:large;" v-if="options.length>0">{{item.name}}</option>
			</select>
		</view>
		<view v-if="Items.length>0">
			<view class="vmodul flow" v-for="(item,index) in Items" :key="index" @click="ShowModal(index)" :class="{active: backgIndex==index}">
				<view class="home-info">
					<image :src="item.homeinfo.userpic" mode="widthFix" lazy-load></image>
				</view>
				<navigator url="./ring?param=1" hover-class="navigator-hover">
					<view>
						<view class="cu-form-groupt" :class="{active: backgIndex==index}">
							<view>
								<view>{{item.homeinfo.username}}</view>
								<view>{{item.homeinfo.jobNumber}}</view>
							</view>
							<view class="tmodul" :class="{activet: backgIndex==index}">{{item.percentage}}</view>
						</view>
						<view class="cu-form-groupt">
							<view class="cu-form-groupt" style="padding-right: 30upx;" :class="{active: backgIndex==index}">
								<view>未完成:</view>
								<view>{{item.notFinished}}</view>
							</view>
							<view class="cu-form-groupt" :class="{active: backgIndex==index}">
								<view>已完成:</view>
								<view>{{item.finished}}</view>
							</view>
						</view>
						<view class="cu-form-groupt" :class="{active: backgIndex==index}">
							<view class="cu-form-groupt" :class="{active: backgIndex==index}">
								<view>审核中:</view>
								<text>{{item.inAudit}}</text>
							</view>
							<view class="cu-form-groupt" :class="{active: backgIndex==index}">
								<view>未通过:</view>
								<text>{{item.notPass}}</text>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view style="position: absolute; bottom: 60upx;width: 100%;">
			<button @click="sureSubmit" style="background-color:#11CC99;height: 80upx;width: 80%;"><span style="">确认派发</span></button>
		</view>
		
		<view class="cu-modal" :class="modalName==true?'show':''">
			<view class="cu-dialog">
				<view class="bg-img" style="height:200px;">
					<view class="cu-bar justify-end text-white">
						<view class="action" @tap="hideModal">
							<image src="../../static/images/toast.png" mode="widthFix" lazy-load></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				options:[{value:'运维一组',name:'运维一组'},{value:'运维二组',name:'运维二组'}],
				opValue:'运维一组',
				backgroundImage:'@/static/images/bg-poster.jpg',
				showMessage1:false,
				showMessage2:false,
				Items:[{homeinfo:{
					userpic:"../../static/demo/userpic/11.jpg",
					username:"昵称",
					jobNumber:"123244"
				}, notFinished:'11',finished:'23',inAudit:'1',notPass:'0',percentage:'83%'},
				{homeinfo:{
					userpic:"../../static/demo/userpic/11.jpg",
					username:"昵称",
					jobNumber:"123244"
				},notFinished:'15',finished:'18',inAudit:'1',notPass:'2',percentage:'73%'},
				{homeinfo:{
					userpic:"../../static/demo/userpic/11.jpg",
					username:"昵称",
					jobNumber:"123244"
				},notFinished:'4',finished:'19',inAudit:'2',notPass:'3',percentage:'70%'}],
				backgIndex:-1,
				modalName:false,
			}
		},
		methods:{
			sureSubmit:function(){
				this.showModal();
			},
			ShowModal:function(index){
				this.backgIndex=index;
			},
			showModal() {
				this.modalName = true;
			},hideModal() {
				this.modalName = false;
			},
			changeValue(){
				console.log("opValue"+this.opValue);
			}
		}
	}
</script>

<style>
	.flow {
	  display: flex;
	  display: -webkit-flex;
	  background: #fff;
	  padding: 22upx;
	}
	.vmodul{
		margin-left: 30upx;
		margin-right: 30upx;
		margin-top: 30upx;
		background-color: #FCFCFC;
		padding: 10upx 10upx 10upx 10upx;
		border-radius:22upx
	}
	.tmodul{
		margin-left: 1upx;
		margin-right: 1upx;
		margin-top: 1upx;
		background-color: #11CC99;
		padding: 1upx 1upx 1upx 1upx;
		border-radius:10px;
		width: 90upx;
		height: 45upx;
		text-align: center;
	}
	.cu-form-group{
		flex: 1;
		padding-right: 40upx;
		overflow: hidden;
		position: relative;
	}
	.reason{
		padding: 11upx;
	}
	.home-info{
		padding: 20upx 40upx;
	}
	.home-info>image{
		flex-shrink: 0;
		width: 100upx;
		height: 100upx;
		border-radius: 100%;
		margin-right: 15upx;
	}
	.cu-form-groupt {
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.active {
	   background-color: #11CC99 !important;
	}
	.cuIcon-close{
		color: #000000;
	}
	.select1{
	    border: 0;
		display: block;
		position: relative;
		min-height: 25upx;
		line-height: 25upx;
		white-space: nowrap;
		overflow: hidden;
		background-color: #eee;
		background: transparent;
		font-size:large;
		margin-top: 15upx;
		margin-left: 21upx;
	}
	.activet{
		background-color: #F2D67A;
	}
</style>
